<template>
  <div class="Modifyprogram">
    <div class="Modifyprogram-title">
      <span @click="Goback()">修改课程</span>
    </div>
    <div class="Modifyprogram-content">
      <span>默认选择本地时区，点击可更改</span>
      <label class="Courses-cover">
        <span>
          <i>*</i> 课程封面
        </span>
        <el-upload
          class="avatar-uploader"
          :action="domain"
          :show-file-list="false"
          :data="QiNiYun"
          :before-upload="beforeUploadGetKey"
          :on-success="Uploadcoursecover"
        >
          <img v-if="FrontofidcardimageUrl" :src="FrontofidcardimageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <i>点击更换封面</i>
      </label>
      <label class="Createcourse-topic">
        <span>
          <i>*</i> 主题
        </span>
        <el-cascader v-model="Thethemevalue" :options="Thetheme" @change="handleChange"></el-cascader>
      </label>
      <label class="Createcourse-type">
        <span>
          <i>*</i> 课程类型
        </span>
        <el-select v-model="classTypevalue" @change="ChangeClasstypess">
          <el-option
            v-for="(item,index) in Classtypes"
            :key="index"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </label>
      <label class="Createcourse-class">
        <span>
          <i>*</i> 班级
        </span>
        <!-- <el-select value-key="id" v-model="Theclassvalue" placeholder="选择班级" @change="changeTelescopic">
                    <el-option 
                    v-for="item in Theclass" 
                    :key="item.id" 
                    :label="item.group_name" 
                    :value="item"></el-option>
        </el-select>-->
        <el-input
          placeholder="请选择班级"
          style="width:50%;"
          @click.native="showpopup"
          readonly="readonly"
          v-model="Theclassvalue"
        ></el-input>
      </label>
      <label class="Createcourse-Languagelevel">
        <span>
          <i>*</i> 语言等级
        </span>
        <el-select v-model="Languagelevelvalue" @change="ChangeClassagegrade()">
          <el-option
            v-for="(item,index) in Languagelevel"
            :key="index"
            :label="item.label"
            :value="item"
          ></el-option>
        </el-select>
      </label>
      <label class="Createcourse-data">
        <span>
          <i>*</i> 日期
        </span>
        <el-date-picker v-model="dateof" type="date" placeholder="选择日期"></el-date-picker>
      </label>
      <label class="Createcourse-Periodtime">
        <span>
          <i>*</i> 时间段
        </span>
        <ul v-for="(item,index) in Periodtime" :key="index" class="Periodtime-List">
          <span>{{item.Periodtimes}}</span>
          <li
            v-for="(items,e) in item.tiemrs"
            :key="e"
            @click="chosePeriodtime(index,e,item.tiemrs)"
            :class="chosePeriodtimeindex == index+'.'+e?'seled':''"
          >{{items}}</li>
        </ul>
      </label>
      <label class="Createcourse-wheat">
        <span>
          <i>*</i> 最大连麦人数
        </span>
        <el-select v-model="wheatLists">
          <el-option v-for="(item,index) in wheatList" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </label>
      <label class="Createcourse-Introduction">
        <span>文字简介</span>
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          maxlength="200"
          show-word-limit
        ></el-input>
      </label>
      <label class="Createcourse-wheat">
        <span>图片简介</span>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="Uploadcoursecover"
        >
          <img v-if="introduction_cover" :src="introduction_cover" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </label>
      <label class="Createcourse-button">
        <span>取消</span>
        <span @click="Confirmthechange">确认修改</span>
      </label>
    </div>
    <!-- //选择班级弹窗模块 -->
    <div v-show="popup">
      <!--这里是要展示的内容层-->
      <div class="login">
        <div class="popup_title">选择班级</div>
        <div class="popup_cloose" @click="closepopup">×</div>
        <div class="popup_classList">
          <ul>
            <li
              v-for="(item,index) in Theclass"
              :key="index"
              :class="chooseClassIndex ==index?'isChoose':'unChoose'"
              @click="chooseClass(item,index)"
            >
              <img :src="item.faceUrl" alt />
              <span class="popup_group_name">{{item.group_name}}</span>
              <span class="popup_age_grade">{{item.age_grade}}</span>

              <span class="popup_language">{{item.language}}</span>
            </li>
          </ul>
          <div class="popup_confirm" @click="ChangeClassInfo()">确认</div>
          <div class="popup_creatNew" @click="showpopup1">创建新班级</div>
        </div>
      </div>
      <!--这里是半透明背景层-->
      <div class="over"></div>
    </div>
    <!-- //创建班级弹窗模块 -->
    <div v-show="popup1">
      <!--这里是要展示的内容层-->
      <div class="login1">
        <div class="popup1_title">创建班级</div>
        <label class="creat_classname">
          <el-input placeholder="请输入班级名称" style="width:50%;" v-model="classname"></el-input>
        </label>
        <label class="creat_cover">
          <el-upload
            class="creat_uploader"
            :action="domain"
            :show-file-list="false"
            :data="QiNiYunss"
            :before-upload="beforeUploadGetKeyss"
            :on-success="UploadCreatcover"
          >
            <div>{{creatClass_cover == ''?'请上传班级封面':'选择此图'}}</div>
            <img v-if="creatClass_cover" :src="creatClass_cover" class="creat_avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon creat_i"></i>
          </el-upload>
        </label>
        <label class="creat_language">
          <el-select v-model="Language" @change="ChangeLanguage" placeholder="请选择语言">
            <el-option v-for="(item,index) in languageList" :key="index" :value="item"></el-option>
          </el-select>
        </label>
        <label class="creat_people">
          <el-select v-model="people" @change="ChangePeople" placeholder="请选择面向人群">
            <el-option v-for="(item,index) in peopleList" :key="index" :value="item"></el-option>
          </el-select>
        </label>
        <div class="popup1_confirm" @click="createdClasss">确认创建</div>
        <div class="popup1_cancle" @click="closepopup1">取消</div>
      </div>
      <!--这里是半透明背景层-->
      <div class="over1"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Modifyprogram",
  data() {
    return {
      Language: "",
      creatClass_cover: "",
      chooseClassIndex: -1,
      yijingxuanze: false,
      classname: "",
      languageList: [],
      people: "",
      peopleList: ["幼儿", "青少年", "大学生", "成人"],
      FrontofidcardimageUrl: "",
      Choosetopic: "",
      dateof: new Date(),
      Thetheme: [
        {
          value: "Scene",
          label: "场景",
          children: [
            {
              value: "Restaurant",
              label: "餐馆"
            },
            {
              value: "Post Office",
              label: "邮局"
            },
            {
              value: "Hospital and health scene",
              label: "医院及健康场景"
            },
            {
              value: "Hotel",
              label: "酒店"
            },
            {
              value: "Shopping mall",
              label: "商场购物"
            },
            {
              value: "Work and work scenes",
              label: "工作和上班场景"
            },
            {
              value: "Airport",
              label: "机场"
            },
            {
              value: "Farm",
              label: "农场"
            },
            {
              value: "Campus",
              label: "校园"
            },
            {
              value: "Travel",
              label: "旅行"
            },
            {
              value: "Supermarket",
              label: "超市"
            },
            {
              value: "Drive",
              label: "驾驶"
            },
            {
              value: "Wedding",
              label: "婚礼"
            },
            {
              value: "Cinema",
              label: "电影院"
            },
            {
              value: "Entertainment place",
              label: "娱乐场所"
            },
            {
              value: "Gymnasium",
              label: "体育馆"
            },
            {
              value: "Museum",
              label: "博物馆"
            },
            {
              value: "Bar or KTV",
              label: "酒吧或KTV"
            }
          ]
        },
        {
          value: "Topic",
          label: "主题",
          children: [
            {
              value: "Self introduction",
              label: "自我介绍"
            },
            {
              value: "Learning and education",
              label: "学习教育"
            },
            {
              value: "Talk about music",
              label: "聊聊音乐"
            },
            {
              value: "Talk about family",
              label: "聊聊家人"
            },
            {
              value: "Talk about dressing",
              label: "聊聊穿着"
            },
            {
              value: "Talk about friends",
              label: "聊聊朋友"
            },
            {
              value: "Talk about delicious food",
              label: "聊聊美食"
            },
            {
              value: "Festivals and customs",
              label: "节日和习俗"
            },
            {
              value: "Talk about variety show",
              label: "聊聊综艺节目"
            },
            {
              value: "Talk about the near future plan",
              label: "聊聊近期计划"
            },
            {
              value: "Talking about hobbies",
              label: "聊聊爱好"
            },
            {
              value: "Talk about learning",
              label: "聊聊学习"
            },
            {
              value: "Talk about TV series",
              label: "聊聊电视剧"
            },
            {
              value: "Talk about movies",
              label: "聊聊电影"
            },
            {
              value: "Talk about work",
              label: "聊聊工作"
            },
            {
              value: "How to learn the language well",
              label: "怎么学好这个语言"
            },
            {
              value: "About tourism",
              label: "关于旅游"
            },
            {
              value: "Talk about geography",
              label: "聊聊地理"
            },
            {
              value: "Talking about ideals",
              label: "谈谈理想"
            },
            {
              value: "Talk about love",
              label: "聊聊爱情"
            },
            {
              value: "Talk about the weather",
              label: "聊聊天气"
            },
            {
              value: "Talk about some interesting things",
              label: "聊一些趣事"
            }
          ]
        }
      ],
      titles: "",
      Thethemevalue: "",
      Classtypes: [
        {
          label: "online_voice",
          value: "语音直播课堂"
        },
        {
          label: "online_video",
          value: "视频直播课堂"
        }
      ], //课程类型
      classTypevalue: "",
      Theclass: ["保加利亚语音", "班级啊哈哈"], //班级
      Theclassvalue: "",
      Languagelevel: [
        {
          label: "零基础",
          value: "Zero basis"
        },
        {
          label: "初级",
          value: "Senior"
        },
        {
          label: "中级",
          value: "Intermediate"
        },
        {
          label: "高级",
          value: "Primary"
        }
      ], //语言等级
      Languagelevelvalue: "",
      Periodtime: [
        {
          Periodtimes: "凌晨",
          tiemrs: [
            "00:00-00:30",
            "00:30-01:00",
            "01:00-01:30",
            "01:30-02:00",
            "02:00-02:30",
            "02:30-03:00",
            "03:00-03:30",
            "03:30-04:00",
            "04:00-04:30",
            "04:30-05:00",
            "05:00-05:30",
            "05:30-06:00"
          ]
        },
        {
          Periodtimes: "早上",
          tiemrs: ["06:00-06:30", "06:30-07:00", "07:00-07:30", "07:30-08:00"]
        },
        {
          Periodtimes: "上午",
          tiemrs: [
            "08:00-08:30",
            "08:30-09:00",
            "09:00-09:30",
            "09:30-10:00",
            "10:00-10:30",
            "10:30-11:00",
            "11:00-11:30",
            "11:30-12:00"
          ]
        },
        {
          Periodtimes: "中午",
          tiemrs: ["12:00-12:30", "12:30-13:00", "13:00-13:30", "13:30-14:00"]
        },
        {
          Periodtimes: "下午",
          tiemrs: [
            "14:00-14:30",
            "14:30-15:00",
            "15:00-15:30",
            "15:30-16:00",
            "16:00-16:30",
            "16:30-17:00",
            "17:00-17:30",
            "17:30-18:00"
          ]
        },
        {
          Periodtimes: "晚上",
          tiemrs: [
            "18:00-18:30",
            "18:30-19:00",
            "19:00-19:30",
            "19:30-20:00",
            "20:00-20:30",
            "20:30-21:00",
            "21:00-21:30",
            "21:30-22:00",
            "22:00-22:30",
            "22:30-23:00",
            "23:00-23:30",
            "23:30-23:59"
          ]
        }
      ],
      introduction_cover: "",
      wheatList: ["1", "2", "3", "4"],
      wheatLists: "",
      chosePeriodtimeindex: "",
      textarea: "",
      unserinfo: JSON.parse(localStorage.getItem("userinfo")),
      item: this.$route.query.item,
      language_levels: "",

      //上传图片
      QiNiYun: {
        key: "",
        token: ""
      },
      QiNiYuns: {
        key: "avatoravatoravatorasss",
        token: ""
      },
      QiNiYunss: {
        key: "avator",
        token: ""
      },
      domain: "http://up-z0.qiniup.com",
      qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
      upload_qiniu_addr: "http://img.curiousmore.com/",

      //传给后台的字段
      classroom_type: "",
      connect_peoplenum: "", //连麦人数
      cover: "",
      end_time: "",
      group_id: "",
      id: "",
      introduction_content: "", //课堂简介
      introduction_cover: "",
      language_level: "",
      master_id: "",
      start_time: "",
      title: "",
      type: "",
      popup: 0,
      popup1: 0,
      languageTranslate: [
        { Estonian: "爱沙尼亚语" },
        { Arabic: "阿拉伯语" },
        { Bulgarian: "保加利亚语" },
        { polish: "波兰语" },
        { Danish: "丹麦语" },
        { German: "德语" },
        { Russian: "俄语" },
        { "Traditional Chinese": "繁体中文" },
        { French: "法语" },
        { Finnish: "芬兰语" },
        { Korean: "韩语" },
        { Dutch: "荷兰语" },
        { Czech: "捷克语" },
        { romanian: "罗马尼亚语" },
        { Portuguese: "葡萄牙语" },
        { Japanese: "日语" },
        { Swedish: "瑞典语" },
        { slovenian: "斯洛文尼亚语" },
        { Thai: "泰语" },
        { Spanish: "西班牙语" },
        { Greek: "希腊语" },
        { hun: "匈牙利语" },
        { Italian: "意大利语" },
        { English: "英语" },
        { Vietnamese: "越南语" },
        { cantonese: "粤语" },
        { Chinese: "中文" }
      ]
    };
  },
  created() {
    this.GetTheclass();
    this.FrontofidcardimageUrl = this.item.cover;

    this.dateof = this.item.create_time;
    this.wheatLists = this.item.connect_peoplenum;
    this.endtime = this.item.create_time + " " + this.item.end_time + ":00";
    this.starttime = this.item.create_time + " " + this.item.start_time + ":00";
    this.type = this.item.type;
    this.group_id = this.item.group_id;
    this.id = this.item.id;
    console.log(this.item);
  },
  mounted() {
    this.getQiniuTokenss();
    this.getLanguageList();
    this.Thetheme.forEach(is => {
      is.children.forEach(e => {
        var tghd = is.value + "/" + e.value;
        if (tghd == this.item.title) {
          this.Thethemevalue = [is.value, e.value];
        }
      });
    });
    this.Classtypes.forEach(e => {
      // console.log(e.label == this.item.classroom_type)
      if (e.label == this.item.classroom_type) {
        this.classTypevalue = e.value;
        this.classroom_type = e.label;
      }
    });
    this.Languagelevel.forEach(e => {
      if (e.label == this.item.language_level) {
        this.Languagelevelvalue = { label: e.label, value: e.value };
        console.log(this.Languagelevelvalue, "000");
      }
    });
  },
  methods: {
      ChangeClassInfo() {
      //班级选择
      if (this.chooseClassIndex == -1) {
        this.$message("请选择班级");
      } else {
        this.popup = 0;
        this.yijingxuanze = true;
      }
    },
    getLanguageList() {
      this.languageTranslate.map(item => {
        for (let x in item) {
          this.languageList.push(item[x]);
        }
      });
    },
    chooseClass(e, index) {
      this.chooseClassIndex = index;
      this.master_id = e.id;
      this.group_id = e.group_id;
      this.languages = e.language;
      this.age_grade = e.age_grade;
      this.types = e.group_type;
      this.Theclassvalue = e.group_name;
    },
    ChangePeople(e) {
      this.people = e;
    },
    ChangeLanguage(e) {
      this.language = e.value;
    },
    UploadCreatcover(res, file) {
      this.creatClass_cover = this.upload_qiniu_addr + res.key;
    },
    beforeUploadGetKeyss() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuTokenss();
    },
    getQiniuTokenss() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
        data: data
      })
        .then(response => {
          this.QiNiYunss.token = response.data.data;
          this.QiNiYunss.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    createdClasss() {
      let langu = "";
      let age_grade = "";
      this.languageTranslate.map(item => {
        for (let x in item[x]) {
          if (this.Language == x) {
            langu = x;
          }
        }
      });
      if (this.people == "幼儿") {
        age_grade = "Childhood";
      } else if (this.people == "青少年") {
        age_grade = "Teenagers";
      } else if (this.people == "大学生") {
        age_grade = "University Student";
      } else if (this.people == "成人") {
        age_grade = "Adult";
      }
      let data = {
        age_grade: "",
        faceUrl: this.creatClass_cover,
        group_name: this.classname,
        language: langu,
        owner_id: this.unserinfo.user_id,
        type: "online"
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/message/messageGroup/insert",
        data: data
      })
        .then(res => {
          console.log(res.data.data);
          this.popup1 = 0;
          this.popup = 1;
        })
        .catch(error => {
          console.log(error);
        });
    },
    showpopup1() {
      this.popup1 = 1;
      this.popup = 0;
    },
    closepopup1() {
      this.popup1 = 0;
      this.popup = 1;
    },
    //打开弹窗
    showpopup() {
      console.log("1");

      this.popup = 1;
      this.GetTheclass();
    },
    //关闭弹窗
    closepopup() {
      if (this.yijingxuanze) {
        this.popup = 0;
      } else {
        this.chooseClassIndex = -1;
        this.master_id = "";
        this.group_id = "";
        this.languages = "";
        this.age_grade = "";
        this.types = "";
        this.Theclassvalue = "";
        this.popup = 0;
      }
    },
    Goback() {
      //返回上一页
      this.$router.go(-1);
    },
    handleChange(value) {
      //主题选择
      this.titles = value[0] + "/" + value[1];
    },
    beforeUploadGetKey() {
      //每个文件上传之前 给它一个 名字
      //  this.QiNiYun.key = this.guid();
      this.getQiniuToken();
    },
    getQiniuToken() {
      var data = {
        key: this.guid(),
        type: "pic"
      };
      this.$axios({
        method: "POST",
        url: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
        data: data
      })
        .then(response => {
          this.QiNiYun.token = response.data.data;
          this.QiNiYun.key = data.key;
        })
        .catch(error => {
          console.log(error);
        });
    },
    ChangeClasstypess(e) {
      //课程选择
      if (e == "语音直播课堂") {
        this.classroom_type = "online_voice";
      } else {
        this.classroom_type = "online_video";
      }
    },
    ChangeClassagegrade(e) {
      console.log(e);
      this.language_level = e.value;
    },
    Uploadcoursecover(res, file) {
      //上传身份证正面
      this.FrontofidcardimageUrl = "";
      this.FrontofidcardimageUrl = this.upload_qiniu_addr + res.key;
      console.log(this.FrontofidcardimageUrl);
    },
    chosePeriodtime(e, echild, tiemrs) {
      //选择时间段
      this.chosePeriodtimeindex = e + "." + echild;
      var reg = /^(\d{4})-(\d{2})-(\d{2})$/;
      if (!reg.test(this.dateof)) {
        this.dateFormat(this.dateof);
      }
      var starttime = tiemrs[echild].substring(0, 5);
      var endtime = tiemrs[echild].substring(6, 11);
      this.starttime = this.dateof + " " + starttime + ":00";
      this.endtime = this.dateof + " " + endtime + ":00";
    },
    dateFormat: function(time) {
      var date = time;
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      this.dateof = year + "-" + month + "-" + day;
      return year + "-" + month + "-" + day;
    },
    GetTheclass() {
      var data = {
        currentPage: 1,
        pageSize: 100,
        owner_id: this.unserinfo.user_id
      };
      this.$axios({
        //获取我的班级
        method: "get",
        url:
          "http://101.37.66.151:8768/eg-api/message/messageGroup/queryMyListPage",
        params: data
      })
        .then(res => {
          console.log(res.data.data);
          this.Theclass = res.data.data;
          this.Theclass.map(item => {
            if (item.age_grade == "Childhood") {
              item.age_grade = "幼儿";
            } else if (item.age_grade == "Teenagers") {
              item.age_grade = "青少年";
            } else if (item.age_grade == "University Student") {
              item.age_grade = "大学生";
            } else if (item.age_grade == "Adult") {
              item.age_grade = "成年";
            } else if (item.age_grade == "Primary") {
              item.age_grade = "初级";
            }
            this.languageTranslate.map(info => {
              for (let x in info) {
                if (item.language == x) {
                  item.language = info[x];
                }
              }
            });
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    changeTelescopic(e) {
      //班级选择
      console.log(e);
      // this.master_id = e.id
      this.group_id = e.id;
      // this.type = e.type
      console.log(this.group_id);
    },
    Confirmthechange() {
      if (this.Languagelevelvalue.value == undefined) {
        alert("请选择语言等级");
      } else {
        this.connect_peoplenum = this.wheatLists;
        this.cover = this.FrontofidcardimageUrl;
        this.end_time = this.endtime;
        this.start_time = this.starttime;
        this.title = this.Thethemevalue[0] + "/" + this.Thethemevalue[1];
        this.master_id = this.unserinfo.user_id;
        var data = {
          classroom_type: this.classroom_type,
          connect_peoplenum: this.connect_peoplenum, //连麦人数
          cover: this.cover,
          end_time: this.end_time,
          group_id: this.group_id,
          id: this.id,
          introduction_content: this.textarea, //课堂简介
          introduction_cover: "",
          language_level: this.Languagelevelvalue.value,
          master_id: this.master_id,
          start_time: this.start_time,
          title: this.title,
          type: this.type,
          offset: "+8"
        };
        console.log(data);
        this.$axios({
          method: "POST",
          url: "http://101.37.66.151:8768/eg-api/user/masterAppointment/update",
          data: data
        })
          .then(res => {
            alert(res.data.message);
            if (res.data.message == "成功") {
              this.$router.go(-1);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.creat_i {
  margin-left: 150px;
}
.creat_language {
  height: 60px;
  align-items: center;
  position: absolute;
  top: 255px;
  left: 130px;
  width: 570px;
  /deep/.el-select {
    width: 50%;
    border: #cecece;
  }
}
.creat_people {
  height: 60px;
  align-items: center;
  position: absolute;
  top: 320px;
  left: 130px;
  width: 570px;
  /deep/.el-select {
    width: 50%;
    border: #cecece;
  }
}
.creat_avatar {
  width: 100px;
}
.creat_cover {
  width: 100%;
  height: 200px;
  /deep/.creat_uploader {
    width: 286px;
    height: 33px;
    border: 1px solid #cecece;
    position: absolute;
    top: 197px;
    left: 130px;
    font-size: 14px;
    color: #cbcbcb;
    /deep/.el-upload {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: 31px;
        max-width: 80%;
        margin-left: 131px;
      }
    }
  }
}
.creat_classname {
  position: absolute;
  top: 130px;
  left: 130px;
  width: 581px;
  height: 54px;
}
.popup1_confirm {
  position: absolute;
  top: 470px;
  left: 303px;
  color: #fff;
  background: #47cecf;
  width: 213px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 27px;
}
.popup1_cancle {
  text-align: center;
  position: absolute;
  top: 470px;
  left: 64px;
  width: 213px;
  height: 54px;
  border-radius: 27px;
  line-height: 54px;
  background: #e1e1e1;
  color: #9f9f9f;
}
.login1 {
  position: fixed;
  font-size: 24px;
  height: 549px;
  width: 560px;
  background-color: #fdfdfd;
  border-radius: 1.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1003;
  .popup1_title {
    font-size: 24px;
    color: #2d2d2d;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin-top: 16px;
  }
}
.over1 {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.7; //透明度为70%
  filter: alpha(opacity=70);
  top: 0;
  left: 0;
  z-index: 1001;
  background-color: #111111;
}
.popup_confirm {
  position: absolute;
  top: 382px;
  left: 50%;
  text-align: center;
  width: 453px;
  height: 54px;
  line-height: 50px;
  border-radius: 27px;
  background: #47cecf;
  color: #fff;
  margin-left: -221px;
  cursor: pointer;
}
.popup_creatNew {
  position: absolute;
  top: 460px;
  left: 50%;
  width: 458px;
  border: 1px solid #47cecf;
  height: 47px;
  line-height: 47px;
  border-radius: 25px;
  text-align: center;
  margin-left: -223px;
  color: #47cecf;
  cursor: pointer;
}
.isChoose {
  border: 1px solid #47cecd;
}
.unChoose {
  border: 1px solid #fff;
}
.rule {
  position: absolute;
  width: 0.82rem;
  height: 0.36rem;
  top: 0.08rem;
  right: 0rem;
  background: #111111;
}
.login {
  position: fixed;
  font-size: 24px;
  height: 610px;
  width: 560px;
  background-color: #fdfdfd;
  border-radius: 1.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002;
  .popup_cloose {
    margin-right: 20px;
    width: 20px;
    height: 20px;
    font-size: 32px;
    float: right;
    margin-top: -39px;
    cursor: pointer;
  }
  .popup_title {
    font-size: 24px;
    color: #2d2d2d;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin-top: 16px;
  }
  .popup_classList {
    width: 96%;
    height: 65%;
    position: absolute;
    top: 68px;
    left: 5px;
    ul {
      width: 102%;
      height: 57%;
      display: flex;
      list-style: none;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 0 auto;
      padding: 0;
      justify-content: space-between;
      li {
        width: 31%;
        height: 64px;
        line-height: 24px;
        background: rgba(243, 243, 243, 1);
        border-radius: 10px;
        margin-top: 10px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 9px;
          position: relative;
          top: 8px;
          left: 10px;
        }
        .popup_group_name {
          font-size: 14px;
          position: relative;
          top: -20px;
          left: 16px;
          color: #505050;
        }
        .popup_age_grade {
          font-size: 12px;
          width: 50%;
          display: flex;
          margin-left: 126px;
          margin-top: -20px;
          color: #989898;
          height: 30px;
        }
        .popup_language {
          font-size: 12px;
          color: #989898;
          display: flex;
          margin-left: 63px;
          margin-top: -31px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          height: 30px;
        }
      }
    }
  }
}
.popup_classList ::after {
  content: "";
  width: 31%;
  height: 64px;
}
.over {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.7; //透明度为70%
  filter: alpha(opacity=70);
  top: 0;
  left: 0;
  z-index: 1001;
  background-color: #111111;
}
.Modifyprogram {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
}
.Modifyprogram-title {
  position: relative;
  width: 90%;
  height: 80px;
  border-bottom: 1px solid #47cecf;
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  background-image: url("/images/形状 3png.png");
  background-repeat: no-repeat;
  background-position-y: 52px;
  background-size: 1% 16%;
  background-position-x: 15px;
  span {
    padding-left: 4%;
    height: 100%;
    width: 20%;
    line-height: 80px;
    font-size: 20.01px;
    font-weight: bold;
    color: #2dc7c8;
    cursor: pointer;
  }
}
.Modifyprogram-content {
  position: relative;
  width: 90%;
  margin: 0 auto;
}
.Modifyprogram-content > span {
  display: inline-block;
  width: 100%;
  height: 40px;
  background: rgba(243, 243, 243, 1);
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #d9d8d8;
  margin-top: 10px;
  cursor: pointer;
}
.Modifyprogram-content > label {
  display: flex;
  width: 100%;
  margin-top: 30px;
  span {
    width: 10%;
    i {
      color: #ff7336;
    }
  }
}
.Courses-cover {
  width: 100%;
  height: 200px;
  /deep/.avatar-uploader {
    width: 200px;
    border: 1px solid rgba(206, 206, 206, 1);
    /deep/.el-upload {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: auto;
        height: auto;
        max-width: 80%;
      }
    }
  }
}
.Courses-cover > i {
  color: #cacaca;
  width: 30%;
  line-height: 200px;
  padding-left: 4%;
  cursor: pointer;
}
.Createcourse-topic,
.Createcourse-type,
.Createcourse-class,
.Createcourse-Languagelevel,
.Createcourse-wheat {
  height: 60px;
  align-items: center;
  /deep/.el-select {
    width: 50%;
    border: #cecece;
  }
  /deep/.el-cascader {
    width: 50%;
    border: #cecece;
  }
}
.Createcourse-data {
  height: 60px;
  align-items: center;
  /deep/.el-date-editor {
    width: 50%;
    border: #cecece;
  }
  /deep/.el-cascader {
    width: 50%;
    border: #cecece;
  }
}
.Createcourse-Periodtime {
  align-items: center;
  flex-wrap: wrap;
  ul {
    display: flex;
    width: 90%;
    padding: 0;
    flex-wrap: wrap;
    list-style: none;
    margin-left: auto;
    li {
      width: 16%;
      font-size: 12px;
      height: 31px;
      background: rgba(221, 221, 221, 1);
      border-radius: 16px;
      margin-top: 10px;
      text-align: center;
      line-height: 31px;
      margin-left: 1%;
      cursor: pointer;
      &:first-child {
        width: 10%;
        background: none;
      }
    }
  }
}
.Createcourse-Periodtime > span {
  margin-top: -8.5%;
}
.Periodtime-List > span {
  width: 6% !important;
  height: 31px !important;
  margin-top: 10px;
  line-height: 31px !important;
}
.Periodtime-List > li {
  &:nth-child(7) {
    margin-left: 7%;
  }
  &:nth-child(12) {
    margin-left: 7%;
  }
}
.seled {
  background: #3acbcc !important;
}
.Createcourse-wheat > span {
  width: 14% !important;
}
.Createcourse-Introduction {
  height: 100px;
  align-items: center;
  /deep/.el-textarea {
    width: 50%;
    // height: 100px;
    padding-left: 4%;
  }
}
.Createcourse-button {
  height: 100px;
  align-items: center;
  padding-bottom: 100px;
  span {
    width: 20% !important;
    height: 41px;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
    &:first-child {
      background: rgba(222, 222, 222, 1);
      border-radius: 21px;
      margin-left: 14%;
    }
    &:last-child {
      background: rgba(58, 203, 204, 1);
      border-radius: 21px;
      color: #ffffff;
      margin-left: 4%;
    }
  }
}
</style>